<template>
  <div class="goods">
    <header>
      <van-nav-bar
        title=""
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        :fixed="true"
        :placeholder="true"
      >
        <template #right>
          <van-icon
            name="https://b.yzcdn.cn/vant/icon-demo-1126.png"
            size="24"
          />
        </template>
      </van-nav-bar>
    </header>
    <section class="goodsimg">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </section>
    <!-- 价格、名称及简介 -->
    <section class="intro">
      <div class="head">
        <h3>￥{{ intro.price }}</h3>
        <h5>{{ intro.name }}</h5>
      </div>
      <div class="blurb">
        <p v-for="(item, index) in briefly" :key="index">{{ item }}</p>
      </div>
      <div class="config">
        <ul :class="[num == '1' ? '' : 'tvul']">
          <li
            v-for="(item, index) in parameter"
            :key="index"
            :class="[num == '1' ? '' : 'tvli']"
          >
            <div class="logo">
              <img
                :src="`${
                  num == 1
                    ? require('../../assets/par0' + index + '.png')
                    : require('../../assets/tvpar0' + index + '.png')
                }`"
                alt="item.name"
              />
            </div>
            <div class="prword">
              <p>{{ item.name }}</p>
              <p>{{ item.value }}</p>
            </div>
          </li>
        </ul>
      </div>
    </section>
    <!-- 选择型号 -->
    <section class="opt">
      <div class="optconfig">
        <div class="left">
          <span>已选</span>
        </div>
        <div class="open" @click="show = true">
          <span>{{ selected }}</span
          ><i></i>
        </div>
      </div>
      <div class="optadd">
        <div class="left">
          <span>送至</span>
        </div>
        <div class="open" @click="addressurl">
          <span
            ><img src="../../assets/address.png" alt="" /> {{ address }}</span
          ><i></i>
        </div>
      </div>
      <div class="optfoot">
        <span>☑ Cmi自营</span>
        <span>☑ Cmi发货</span>
        <span>☑ 7天无理由退货</span>
        <i></i>
      </div>
    </section>
    <section class="pron">
      <van-tabs
        v-model="active"
        title-active-color="#f37d0f"
        line-height="0px"
        :animated="true"
      >
        <van-tab title="商品介绍">
          <div class="topimg">
            <img
              class="bg"
              src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/xiaomicivi28ebce7/5355.png?x-fds-process=image/resize,q_95,f_webp"
              alt=""
            />
            <img
              class="con"
              src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/xiaomicivi28ebce7/4223.png"
              alt=""
            />
          </div>
          <div class="twoimg">
            <img
              src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/xiaomicivi28ebce7/4226.jpg"
              alt=""
            />
            <div class="word">
              <div class="t_word">
                <span
                  >轻薄好看好手感，一见倾心<br />
                  超清前置双主摄，独树一帜</span
                >
              </div>
              <div class="b_word">
                <span>
                  影像升级“氛围人像”，拍出更美的你<br />
                  第一代骁龙7移动平台，流畅耐用<br />
                  更多惊艳体验，只为超越期待
                </span>
              </div>
            </div>
          </div>
          <div class="tabimg">
            <div class="tab_t">
              <img
                src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/xiaomicivi28ebce7/4234.png"
                alt=""
              />
              <img
                src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/xiaomicivi28ebce7/4241.png"
                alt=""
              />
            </div>
            <div class="tab_b">
              <img
                src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/xiaomicivi28ebce7/4244.png"
                alt=""
              />
            </div>
          </div>
        </van-tab>
        <van-tab title="规格参数">
          <div class="par">
            <div class="par_t">
              <img
                class="name"
                src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/xiaomicivi28ebce7/4275.png"
                alt=""
              />
              <img
                src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/xiaomicivi28ebce7/3207.png"
                alt=""
              />
              <div class="par_w">
                <span>
                  轻薄好手感｜潮流设计 优雅「小白裙」<br />
                  小米史上最强*前置｜3200万+3200万超清双主摄 <br />
                  多色温四柔光灯 质感美肌<br />
                  旗舰级后置相机 | 5000万 Sony's IMX766 <br />
                  大光圈主角模式 小米影像大脑 疾速影像<br />
                  第一代骁龙7移动平台 | 不锈钢VC液冷散热<br />
                  泰尔实验室36个月抗老化认证<br />
                  6.55英寸AMOLED微曲屏｜4500mAh大电池 | 67W秒充
                </span>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </section>
    <!-- 加购物车/立即购买 -->
    <section class="list">
      <van-sku
        v-model="show"
        stepper-title="购买数量"
        :sku="sku"
        :goods="goods"
        :goods-id="goodsId"
        :quota="quota"
        :quota-used="quotaUsed"
        :hide-stock="sku.hide_stock"
        show-add-cart-btn
        reset-stepper-on-hide
        :initial-sku="sku"
        ref="data"
      >
        <!-- <template #sku-header-price>
          <div class="van-sku__goods-price">
            <span class="van-sku__price-symbol">￥</span
            ><span class="van-sku__price-num">{{ intro.price }}</span>
          </div>
        </template> -->
        <!-- <template #sku-group>
          <div class="choose">
            <div class="title">
              <h4>版本</h4>
            </div>
            <div class="model">
              <ul>
                <li v-for="(item,index) in version" :key="index">
                  <span>{{item}}</span>
                </li>
              </ul>
            </div>
          </div>
          <div class="choose">
            <div class="title">
              <h4>颜色</h4>
            </div>
            <div class="model">
              <ul>
                <li v-for="(item,index) in color" :key="index">
                  <span>{{item}}</span>
                </li>
              </ul>
            </div>
          </div>
        </template> -->
        <template #sku-messages>
          <div></div>
        </template>

        <template #sku-actions>
          <div class="van-sku-actions">
            <van-button
              square
              size="large"
              type="danger"
              @click="onAddCartClicked"
            >
              确定
            </van-button>
          </div>
        </template>
      </van-sku>
      <van-sku
        v-model="myshow"
        stepper-title="购买数量"
        :sku="sku"
        :goods="goods"
        :goods-id="goodsId"
        :quota="quota"
        :quota-used="quotaUsed"
        :hide-stock="sku.hide_stock"
        show-add-cart-btn
        reset-stepper-on-hide
        :initial-sku="sku"
      >
        <!-- 自定义 sku-header-price -->
        <template #sku-header-price="props">
          <div class="van-sku__goods-price">
            <span class="van-sku__price-symbol">￥</span
            ><span class="van-sku__price-num">{{ props.price }}</span>
          </div>
        </template>
        <template #sku-group>
          <div class="choose">
            <div class="title">
              <h4>版本</h4>
            </div>
            <div class="model">
              <ul>
                <li>
                  <span>8GB+256GB</span>
                </li>
              </ul>
            </div>
          </div>
          <div class="choose">
            <div class="title">
              <h4>颜色</h4>
            </div>
            <div class="model">
              <ul>
                <li>
                  <span>小白裙</span>
                </li>
              </ul>
            </div>
          </div>
        </template>
        <template #sku-messages>
          <div></div>
        </template>
        <!-- 自定义 sku actions -->
        <template #sku-actions>
          <div class="van-sku-actions">
            <van-button
              square
              size="large"
              type="warning"
              @click="onAddCartClicked"
            >
              加入购物车
            </van-button>
            <!-- 直接触发 sku 内部事件，通过内部事件执行 onBuyClicked 回调 -->
            <van-button square size="large" type="danger" @click="onBuyClicked">
              立即购买
            </van-button>
          </div>
        </template>
      </van-sku>
    </section>
    <!-- 配送至 -->
    <section class="address">
      <van-action-sheet v-model="addshow" title="配送至">
        <div class="content">
          <van-address-list
            v-model="chosenAddressId"
            :list="list"
            default-tag-text="默认"
            @add="onAdd"
            @click-item="onChoose"
          />
          <h4 v-if="list.length == 0">还没有添加收货地址哦~</h4>
        </div>
      </van-action-sheet>
    </section>
    <footer>
      <van-goods-action>
        <van-goods-action-icon icon="wap-home-o" text="首页" />
        <van-goods-action-icon icon="chat-o" text="客服" />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          @click="onClickshop"
        />
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="show = true"
        />
        <van-goods-action-button
          type="danger"
          text="立即购买"
          @click="myshow = true"
        />
      </van-goods-action>
    </footer>
  </div>
</template>
<script>
import { Toast } from "vant";
import { obj } from "@/data/index";
import {
  getPhoneinfor,
  getPhoneconfig,
  usershopcart,
  getTVinfor,
  getTVconfig,
} from "@/http/api";
export default {
  data() {
    return {
      intro: "",
      briefly: "",
      parameter: "",
      images: [
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-2.jpg",
      ],
      active: 0,
      show: false,
      myshow: false,
      addshow: false,
      newaddshow: false,
      sku: obj.sku,
      goods: obj.goods,
      quota: 5,
      quotaUsed: 0,
      goodsId: 123,
      selected: "请选择",
      chosenAddressId: "1",
      list: [],
      address: "广东省 广州市 从化区",
      num: 1,
    };
  },
  methods: {
    //返回
    onClickLeft() {
      this.$router.push({ path: "/m" });
    },
    onClickRight() {
      Toast("按钮");
    },
    //跳转到购物车界面
    onClickshop() {
      this.$router.push({ path: "/shop" });
    },
    //立即购买
    onBuyClicked() {
      Toast("购买");
    },
    //加入购物车
    onAddCartClicked(data) {
      this.show = false;
      // console.log(this.$refs.data.getSkuData());
      // console.log(this.sku.tree);
      let goodsobj = {};
      let obj = this.$refs.data.getSkuData();
      let { price, s1, s2 } = obj.selectedSkuComb;
      let selectedNum = obj.selectedNum;
      let arr1 = this.sku.tree[0].v;
      let arr2 = this.sku.tree[1].v;
      let result = "";
      arr1.forEach((item) => {
        if (item.id == s1) {
          result += item.name + ",";
        }
      });
      arr2.forEach((item) => {
        if (item.id == s2) {
          result += item.name;
        }
      });
      this.selected = this.intro.name + "," + result + "x" + selectedNum;
      goodsobj.name = this.intro.name;
      goodsobj.sel = result;
      goodsobj.num = selectedNum;
      goodsobj.price = price;
      goodsobj.number = this.goodsId;
      goodsobj.checked = true;
      console.log(goodsobj);
      let shop = JSON.parse(localStorage.getItem("shop"));

      if (shop == null) {
        shop = [goodsobj];
      } else {
        shop.unshift(goodsobj);
      }
      localStorage.setItem("shop", JSON.stringify(shop));
      this.addshop(shop);
    },
    //添加购物车数据到用户数据
    addshop(shop) {
      let token = localStorage.getItem("token");
      usershopcart("/user/shopcart", { token, shop }).then((data) => {
        if (data.code == 200) {
          console.log(data);
        } else {
          console.log(data.msg);
        }
      });
    },
    onAdd() {
      // Toast("新增地址");
      // this.newaddshow = true;
    },

    //选择配送地址
    addressurl() {
      this.addshow = true;
    },

    //渲染内容
    redering() {
      let that = this;
      let id = this.$route.query.number;
      // console.log(id.substring(0, 1));
      this.num = id.substring(0, 1);
      let level = id.substring(0, 1);
      switch (level) {
        case "1":
          getPhoneinfor("/data/phoneintro", { id }).then((data) => {
            if (data.code == 200) {
              console.log(data.rows[0]);
              let intro = data.rows[0]
              that.intro = data.rows[0];
              that.briefly = JSON.parse(intro.introduce);
              that.parameter = JSON.parse(intro.parameter);
              // console.log(JSON.parse(that.intro.color));
            } else {
              console.log(data.msg);
            }
          });
          break;
        case "2":
          getTVinfor("/telly/tvintro", { id }).then((data) => {
            if (data.code == 200) {
              console.log(data.rows[0]);
              let intro = data.rows[0];
              that.intro = data.rows[0];
              that.briefly = JSON.parse(intro.introduce);
              that.parameter = JSON.parse(intro.parameter);
              that.images = JSON.parse(intro.images);
              // console.log(JSON.parse(that.intro.color));
            } else {
              console.log(data.msg);
            }
          });
          break;
      }
    },
    //获取配置信息
    getconfig() {
      let that = this;
      let id = this.$route.query.number;
      let level = id.substring(0, 1);
      this.goodsId = id;
      switch (level) {
        case "1":
          getPhoneconfig("/data/phoneconfig", { id }).then((data) => {
            if (data.code == 200) {
              // console.log(data.rows);
              that.sku = JSON.parse(data.rows[0].sku);
              that.goods = JSON.parse(data.rows[0].goods);
            } else {
              console.log(data.msg);
            }
          });
          break;
        case "2":
          getTVconfig("/telly/tvconfig", { id }).then((data) => {
            if (data.code == 200) {
              console.log(data.rows);
              that.sku = JSON.parse(data.rows[0].sku);
              that.goods = JSON.parse(data.rows[0].goods);
            } else {
              console.log(data.msg);
            }
          });
          break;
      }
    },
    //配送地址
    initaddress() {
      let that = this;
      let list = JSON.parse(localStorage.getItem("address"));
      if (list) {
        list.forEach((item) => {
          if (item.isDefault) {
            that.chosenAddressId = item.id;
            that.address = item.address;
          }
        });
        that.list = list;
      }
    },
    //选择配送地址
    onChoose(item, index) {
      console.log(item.address, "+", index);
      this.address = item.address;
    },
  },
  created() {
    this.getconfig();
    this.initaddress();
    document.documentElement.scrollTop = 0;
  },
  mounted() {
    this.redering();
  },
};
</script>
<style lang="scss">
@import "@/static/css/base.scss";
@import "@/static/css/goods.scss";
.tvul {
  width: 125% !important;
  .tvli {
    width: 25% !important;
  }
}
</style>